<script  setup>
import { ref, onMounted,reactive } from "vue"
import axios from '../../utils/http.js'
import formatTime from '../../utils/formattime.js'

import { ElMessage } from 'element-plus'

let dialogVisible = ref(false);
let search_input = ref()
const visible = ref(false)
let data = ref([])
let dialogFormVisible = ref(false)
let formLabelWidth = '140px'
let college_list = ref([])
let select_class = ref()
let dog = ref(false)
let e_id = ref(0)

let addForm = ref()
let form = reactive({
  course_name: '',
  course_info: '',
  college_name: '',
  cycle:''
})
// 
let syllabus = ref({
  course_name: '',
  course_info: '',
  college_name: '',
  cycle: ''
})

onMounted(() => {
  getStudents()
})
function getStudents(){
  axios({
    url:'info/syllabusinfo/',
    method:'GET',
  }).then(res =>{
    console.log(res.data.data);
    data.value = res.data.data
  })
}
function dialogForm(){
  axios({
    url:'info/syllabusinfo/',
    method:'POST',
    data:form
  }).then(res =>{
    if(res.data.code==200){
      getStudents()
    }else{
      alert("添加失败")
    }
    dialogFormVisible.value = false
  }).catch(err =>{
    
  })
}
function dialog(id){
  e_id.value = id
  
  axios({
    url:'info/getsyllabusinfo/' + id + '/',
    method:'GET',
  }).then(res =>{
    
    syllabus.value = res.data.data
    dog.value = true
    
  })
}
function edit(){
  axios({
    url: 'info/editsyllabusinfo/' + e_id.value + '/',
    method:'PUT',
    data: syllabus.value
  }).then(res =>{
    if(res.data.code==200){
      ElMessage({
        message:'修改成功',
        type:'success',
      })
      
    }else{
      ElMessage({
        message:'res.data.msg',
        type:'warning',
      })
    }
    getStudents()
    dog.value = false
  })
}
function confirm_delete(id){
  
axios({
  method:"delete",
  url:'info/editsyllabusinfo/'+id+'/',
}).then(res =>{
  if(res.data.code==200){
    ElMessage({
      message:'删除成功',
      type:'warning'
    })
  }else{
    ElMessage({
      message:res.data.msg,
      type:'warning'
    })
  }
  getStudents()
})
}
</script>
<template>
  <el-main>
    <el-button type="primary" @click="dialogFormVisible = true">新增大纲</el-button>
    <el-dialog v-model="dialogFormVisible" title="新增大纲" width="500">
      <el-form ref="addForm" :model="form" :rules="rules">
        <el-form-item label="课程" :label-width="formLabelWidth">
          <el-input v-model="form.course_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程大纲" :label-width="formLabelWidth" prop="number">
          <el-input v-model="form.course_info" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学习周期" :label-width="formLabelWidth">
          <el-input v-model="form.cycle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth">
            <el-input v-model="form.college_name" autocomplete="off" />
          </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogForm">
          添加
        </el-button>
      </template>
    </el-dialog>
  </el-main>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="college_name" label="学院" width="180"></el-table-column>
    <el-table-column prop="course_name" label="课程" width="180"></el-table-column>
    <el-table-column prop="course_info" label="课程大纲" width="180"></el-table-column>
    <el-table-column prop="cycle" label="学习周期" width="180"></el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="text" size="small" @click="dialog(scope.row.id)" id="editButton">编辑</el-button>
        <el-popconfirm title="确认删除该大纲？" confirm-button-text="是" cancel-button-text="否"
          @confirm="confirm_delete(scope.row.id)">
          <template #reference>
            <el-button size="small" type="danger" :icon="Delete">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dog" title="编辑大纲" width="500">
    <el-form :model="syllabus">
      <el-form-item label="学院" :label-width="formLabelWidth">
        <el-input v-model="syllabus.college_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程" :label-width="formLabelWidth">
        <el-input v-model="syllabus.course_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程大纲" :label-width="formLabelWidth">
        <el-input v-model="syllabus.course_info" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程周期" :label-width="formLabelWidth">
        <el-input v-model="syllabus.cycle" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="edit">
        修改
      </el-button>
    </template>
  </el-dialog>
</template>
<style>

</style>